
<!-- 
@descrition: '' 
@auth: '' 
@todo 多选，应该换一种形式。
-->
<template>
	<view>
		<view  style="padding: 20rpx;" @click="clickHandler">
			<u-icon name="list" size="40" bold></u-icon>
		</view>
		<u-popup v-model="visible" mode="bottom" >
		
			<view style="padding: 20rpx;">
				<u-form :model="form" ref="uForm" label-width="150rpx">
					<u-form-item label="佣金状态">
						
						<u-radio-group v-model="form.status">
							<u-radio  
								v-model="item.checked" 
								v-for="(item, index) in statusList" 
								:key="item.value" 
								:name="item.value"
							>{{item.name}}</u-radio >
						</u-radio-group>
					</u-form-item>
					<u-form-item label="佣金类型"  prop="type">
						
						<u-checkbox-group @change="setFormType">
							<u-checkbox  
								v-model="item.checked" 
								v-for="(item, index) in typeList" 
								:key="item.value" 
								:name="item.value"
							>{{item.name}}</u-checkbox >
						</u-checkbox-group>
						<!-- <u-input :border="false" type="select" :select-open="typeSelectVisible" v-model="typeLable" placeholder="请选择佣金类型" @click="typeSelectVisible = true"></u-input> -->
					</u-form-item>
					<u-form-item label="时间范围"  >
						<u-input :border="false" type="select" :select-open="calendarVisible" v-model="form.range_time" placeholder="请选择时间范围" @click="calendarVisible = true"></u-input>
					</u-form-item>
					<u-form-item label="订单编号">
						<u-input v-model="form.order_sn" />
					</u-form-item>
					
				</u-form>
			</view>
			<view class="my-popup-footer">
				<u-button type="" size="medium" @click="visible = false">取消</u-button>
				<u-button type="primary" size="medium" @click="sumbit">确定</u-button>
			</view>
		</u-popup>
		<u-calendar v-model="calendarVisible" mode="range" @change="changeQueryDate" safe-area-inset-bottom :mask-close-able="false"></u-calendar>
		<u-select v-model="typeSelectVisible" :list="typeList" label-name="name" @confirm="typeSelectClickHandler"	></u-select>
		
		
	</view>
</template>

<script>
/**
	 * @descrition: '' 
	 * @auth: '' 
	 */
	const typeList = [
		{
			name: '直推',
			value: 1,
			checked: true
		},
		{
			name: '见点',
			value: 2,
			checked: true
		},
		{
			name: '平级',
			value: 3,
			checked: true
		},
		{
			name: '省',
			value: 4,
			checked: true
		},
		{
			name: '市',
			value: 5,
			checked: true
		},
		{
			name: '全网分公司',
			value: 6,
			checked: true
		},
		{
			name: '分公司',
			value: 7,
			checked: true
		},
		{
			name: '联合创始人',
			value: 8,
			checked: true
		},
		{
			name: '分公司合伙人',
			value: 9,
			checked: true
		}
	]
	export default {
		name: 'UserBillQuery',
		props: {},
		data() {
			// 搜索条件如下：
			// 佣金状态：1待结算  2已结算 3已取消
			// 佣金类型：1直推 2见点 3平级  4省 5市 6全网分公司 7分公司 8联合创始人 9分公司合伙人
			// 时间范围：range_time
			// 订单编号：order_sn
			return {
				value1: '',
				visible: false,
				calendarVisible: false,
				typeSelectVisible: false,
				statusList: [
					{
						name: '待结算',
						value: 1,
						checked: true
					},
					{
						name: '已结算',
						value: 2,
						checked: true
					},
					{
						name: '已取消',
						value: 3,
						checked: true
					}
				],
				// 佣金类型：1直推 2见点 3平级  4省 5市 6全网分公司 7分公司 8联合创始人 9分公司合伙人
				typeList: [
					...typeList
				],
				form: {
					status: '',
					type: typeList.map(item => item.value),
					range_time: '',
					order_sn: ''
				},
				typeLable: '',
				
				
			}
			
		},
		computed: {},
		watch:{},
		created() {},
		mounted() {},
		methods: {
			clickHandler() {
				this.visible = true
			},
			openCalendar() {
				this.calendarVisible = true
			},
			setFormType(e) {
				console.log(e)
				this.form.type = e
			},
			changeQueryDate(e) {
				this.form.range_time = `${e.startDate} - ${e.endDate}`
			},
			typeSelectClickHandler(e) {
				// this.form.type = e[0].value
				// this.typeLable = e[0].label
				console.log('this.form.type', this.form.type)
			},
			sumbit() {
				const form = Object.assign({}, JSON.parse(JSON.stringify(this.form)), {
					type: this.form.type.join(',')
				})
				this.visible = false
				this.$emit('submit', form)
			}
			
		}
	}
</script>

<style lang="scss">
	.my-popup-footer {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 20rpx;
	}
</style>